<template>
    <div>
        <!-- 按钮触发弹窗 -->
        <el-button type="primary" @click="dialogFormVisible = true">新增图书</el-button>

        <!-- 新增图书的弹窗 -->
        <el-dialog title="新增图书" v-model="dialogFormVisible" width="50%">
            <el-form :model="newBook">
                <el-form-item label="书名" :label-width="formLabelWidth">
                    <el-input v-model="newBook.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="作者" :label-width="formLabelWidth">
                    <el-input v-model="newBook.author" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="ISBN" :label-width="formLabelWidth">
                    <el-input v-model="newBook.isbn" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="出版社" :label-width="formLabelWidth">
                    <el-input v-model="newBook.publisher" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="出版日期" :label-width="formLabelWidth">
                    <el-date-picker v-model="newBook.publishDate" type="date" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="分类" :label-width="formLabelWidth">
                    <el-input v-model="newBook.category" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="库存" :label-width="formLabelWidth">
                    <el-input-number v-model="newBook.stock" :min="0"></el-input-number>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="addBook">确定</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 图书列表 -->
        <el-table :data="books" style="width: 100%; margin-top: 20px;">
            <el-table-column prop="title" label="书名" width="180"></el-table-column>
            <el-table-column prop="author" label="作者" width="180"></el-table-column>
            <el-table-column prop="isbn" label="ISBN" width="180"></el-table-column>
            <el-table-column prop="publisher" label="出版社" width="180"></el-table-column>
            <el-table-column prop="publishDate" label="出版日期" width="180"></el-table-column>
            <el-table-column prop="category" label="分类" width="180"></el-table-column>
            <el-table-column prop="stock" label="库存" width="180"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button  @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" @click="handleDelete(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import api from '@/api';
export default {
    data() {
        return {
            dialogFormVisible: false, // 控制弹窗显示/隐藏
            formLabelWidth: '100px', // 表单标签宽度
            newBook: {
                title: '',
                author: '',
                isbn: '',
                publisher: '',
                publishDate: '',
                category: '',
                stock: 0
            }, // 新增图书的数据模型
            books: [
                { title: 'Vue.js入门指南', author: '张三', isbn: '1234567890', publisher: '出版社A', publishDate: '2021-01-21', category: 'fenlei', stock: 1 },
                { title: '深入浅出Node.js', author: '李四', isbn: '0987654321', publisher: '出版社B', publishDate: '2022-02-22', category: 'fenlei', stock: 2 }
            ] // 图书数据
        };
    },
    onmounted() {
        // 这里可以调用接口获取图书列表
        getBookList();
    },
    methods: {

        getBookList() {

            api.book.bookList().then(response => {
                console.log(response,"res")
            });
        },
        addBook() {
            if (this.newBook.title && this.newBook.author && this.newBook.isbn && this.newBook.publisher && this.newBook.publishDate && this.newBook.category) {
                this.books.push({ ...this.newBook });
                this.dialogFormVisible = false; // 关闭弹窗
                this.newBook = {
                    title: '',
                    author: '',
                    isbn: '',
                    publisher: '',
                    publishDate: '',
                    category: '',
                    stock: 0
                }; // 清空输入框
            } else {
                this.$message.warning('请输入完整信息');
            }
        },
        handleEdit(row) {
            console.log('编辑:', row);
            // 这里可以添加编辑逻辑
        },
        handleDelete(index) {
            this.$confirm('确定要删除这本书吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.books.splice(index, 1);
                this.$message.success('删除成功!');
            }).catch(() => {
                this.$message.info('已取消删除');
            });
        }
    }
};
</script>

<style scoped>
/* 可以根据需要自定义样式 */
</style>